{% extends "dappx/base.html" %}
{% block body_block %}


<div id="uploadmodal" class="modal fade">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Upload Log File.</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"><i class="fa fa-times-circle fa-sm"></i></span>
        </button>
      </div>
      <div class="modal-body">

  <br>
    <div class="home-search">
      <div class="search-page search-container">
      <div class="form-group">
	<div class="input-group">
	 <div class="custom-file">
		<form id="file-submission-form">
			 {% csrf_token %}
		  <input type="file" class="bg-dark" id="id_file" name="file" onchange="FileChangeFn(event)" aria-describedby="upload-btn">
		  <label id="label-input-file" class="custom-file-label" for="id_file">Choose file</label>
		</form>
	 </div>
	</div>

        <br>
	<span class="badge badge-info" id="file_size"></span> <span class="badge" id="file_type"></span>
        <br>
        <br>

	<div id="upload-progress-bar" class="progress" hidden>
	<div id="speed" class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 0%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
      </div>
      </div>
    </div> 


      </div>
      <div class="modal-footer">
        <button type="button" class="btn" onclick="UploadFileFn()" id="upload-btn" disabled>upload</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>



<div class="container-fluid container-fluid-top mt-2">

<!-- <div class="card border-light  px-4 py-5"> -->

<div class="row justify-content-between" style="margin-top:1em; height:5vh;">
  <div class="col-12 col-md-2 col-sm-2">
    <form class="form-inline" >
     <div class="form-group">
       <input type="text" class="form-control bg-light" placeholder="Search" id="inputDefault">
     </div>

   </form>


  </div>

  <div class="col-12  col-md-auto col-sm-auto">
      <ul class="nav nav-pills">
      <li class="nav-item dropdown">
        <button id="op-btn" class="rainbow-warning au-btn au-btn-icon au-btn--small" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" hidden>Operation</button>
        <div class="dropdown-menu" style="">
          <button class="dropdown-item" data-target="#deleteMultiLogModal" data-toggle="modal">Delete</button>
          <button class="dropdown-item single-select" data-target="#shareModal" data-toggle="modal">Share</button>
          <button class="dropdown-item single-select" data-target="#" data-toggle="modal">Other</button>
	</div>
      </li>

      <li class="nav-item">
      <button class="rainbow au-btn au-btn-icon  au-btn--small" data-target="#uploadmodal" data-toggle="modal">
      <i class="fas fa-xl fa-upload" ></i> Upload
      </button>
      </li>
  </div>

</div>

<hr style="clear:both;">

<input type="hidden" id="table-hash" name="table-hash" value='0'>

<div id="table--data">
</div>


  </div>

    <input type="hidden" id="selected_ids" name="selected_ids" value=''>

    <!-- delete multi-logs Modal -->
    <div class="modal fade" id="deleteMultiLogModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Delete Log</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
          </div>
        <div class="modal-body"> Are you sure to delete these logs?</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button onclick="deleteLogs()" type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModal" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Share Your Log File</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
          </div>
        <div class="modal-body"> 
		<div><input tpye="text" class="form-control" name="share-addr" value="Generate share link failed!" readonly></input> </div>
	</div>
          <div class="modal-footer">
            <button name="share-btn" type="button" class="btn btn-info" onclick="toggleShare()">Share</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

<!-- </div> -->
<!-- </div> -->
</div>
{% endblock %}


{% block script %}
  {% load static %}
  <script type="text/javascript" src="/static/js/moment.js"></script>
  <!-- <script type="text/javascript" src="/static/js/moment-with-locales.min.js"></script> -->
  <script type="text/javascript" src="/static/js/object_hash.js"></script>
  <script src="{% static "js/tsa-data.js" %}"></script>
{% endblock %}

